<template>
  <div class="mine">
    <header class="mine_header">
      <van-image round fit="cover" class="mine_header_avatar"
        :src="avatarSrc" />
      <div class="mine_header_info">
        <span>用户：{{ user?.nickname }}</span>
        <span class="mine_email">邮箱：{{ user?.email }}</span>
      </div>
    </header>
    <section>
      <Card>
        <section class="mine_nav">
            <section class="mine_nav_item">
            <span class="mine_nav_item_title">{{ user?.accountBalance }}</span>
            <span class="mine_nav_item_text" style="margin-top: 8px;">账户余额</span>
          </section>
          <section class="mine_nav_item">
            <span class="mine_nav_item_title">{{ orderList?.length }}</span>
            <span class="mine_nav_item_text" style="margin-top: 8px;">全部订单</span>
          </section>
          <section class="mine_nav_item">
            <span class="mine_nav_item_title">{{ user?.level }}</span>
            <span class="mine_nav_item_text" style="margin-top: 8px;">会员等级</span>
          </section>
          </section>
      </Card>
    </section>
    <section class="mine_order">
      <NavigationCard title="我的订单" :is-show-link="false" >
          <template #content>
            <section class="mine_order_nav">
              <section class="mine_order_nav_item" @click="handleNavigateOrder(-1)">
                <van-icon name="orders-o" color="#0056B3"  class="mine_order_nav_item_icon"/>
                <span class="mine_order_nav_item_text">全部订单</span>
              </section>
              <section class="mine_order_nav_item" @click="handleNavigateOrder(1)">
                <van-icon name="warning-o"  color="#5CB85C" class="mine_order_nav_item_icon"/>
                <span class="mine_order_nav_item_text">待支付</span>
              </section>
              <section class="mine_order_nav_item" @click="handleNavigateOrder(2)">
                <van-icon name="passed" color="#F0AD4E"  class="mine_order_nav_item_icon"/>
                <span class="mine_order_nav_item_text">已支付</span>
              </section>
              <section class="mine_order_nav_item" @click="handleNavigateOrder(3)">
                <van-icon name="close" color="#D9534F"  class="mine_order_nav_item_icon"/>
                <span class="mine_order_nav_item_text">已取消</span>
              </section>
          </section>
          </template>
      </NavigationCard>
    </section>
    <section style="margin-top: 32px;">
      <van-cell-group>
        <van-cell title="账户充值" is-link to="/charge" />
        <van-cell title="个人中心" is-link to="/center" />
        <van-cell title="修改密码" is-link to="/password" />
        <van-cell title="注销账号" is-link @click="handleLogout" />
      </van-cell-group>
    </section>
    <footer class="mine_footer">
      <van-button class="mine_footer_button" round plain type="primary" block color="#E54D42" @click="handleQuit">退出登录</van-button>
    </footer>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { showToast, showConfirmDialog } from 'vant';
import NavigationCard from '@/components/NavigationCard/index.vue';
import { getUserInfo,userLogout } from '@/apis/user';
import { getOrderList } from '@/apis/order.js';
import Card from '@/components/Card/index.vue'
import avatarSrc from '@/assets/avatar.png'

const router = useRouter();
const user = ref({});
const orderList = ref([]);

const init = async () => {
  try {
    const { data } = await getUserInfo();
    user.value = data;
    const {data:{list=[]}} = await getOrderList();
    orderList.value = list;
  } catch (error) {
    console.log(error, 'error');

  }
};

const handleQuit = () => {
  showConfirmDialog({
    title: `确定要退出登录吗？`,
  })
    .then(() => {
      showToast('退出登录成功');
      localStorage.clear();
      router.push('/')
    })
    .catch(() => {

    });
};

const handleLogout = () => {
  showConfirmDialog({
    title: `注销账号`,
    message: "注销账号后，您的账号将无法再登录且账户余额将被清空，请谨慎操作！",
    confirmButtonColor:"#f50"
  })
    .then(async () => {
      try {
        const { code, msg } = await userLogout(user.value?.id);
        if (code === 200) {
          showToast('已成功注销账号');
          localStorage.clear();
          router.push('/')
          return
        }
        showToast(msg);

      } catch (error) {
        console.log(error, 'error');

      }

    })
    .catch(() => {

    });
};

onMounted(() => {
  init();
});

const handleNavigateOrder = (status) => {
      router.push(`/order/${status}`);
};

</script>

<style lang="less" scoped>
.mine {
  &_header {
    width: 96%;
    margin: 0 auto;
    margin-top: 4px;
    height: 80px;
    background-color: #fff;
    box-shadow: 0 0 10px rgba(0, 0, 0, .1);
    border-radius: 8px;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    padding: 16px;

    &_avatar {
      width: 72px;
      height: 72px;
    }

    &_info {
      margin-left: 16px;
      display: flex;
      flex-direction: column;
    }

  }
  &_email{
    margin-top: 4px;
    font-size: 14px;
    color: #999;
  }
  &_nav{
    display: flex;
    &_item{
      height: 64px;
      background-color: #fff;
      display: flex;
      flex:1;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      &_title{
        font-weight: bold;
        font-size: 20px;
      }
      &_text{
        font-size: 14px;
        color: #666;
      }
    }
  }
  &_order{
    &_nav{
      width: 100%;
      height: 72px;
      display: flex;
      justify-content: space-evenly;
      align-items: center;
      &_item{
        flex: 1;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        &_icon{
          font-size: 24px;
          font-weight: bold;
        }
        &_text{
          margin-top: 6px;
          font-size: 14px;
          color: #666;
        }
      }
    }
  }
  &_footer{
    margin-top: 8px;
    &_button{
      height: 36px;
    }
  }
}
</style>
